<template>
  <div class="all">
    <div id="top">
      <div class="title-container">
        <img :src="customerLogo" @click="handleLogoClick" />
        <span class="title" @click="handleLogoClick"> {{ customerDesc }} </span>
      </div>
      <mineAvatar :isMine="false" />
    </div>
    <div id="app-container">
      <searchBox
        ref="searchBox"
        :hideHistory="true"
        :clickInputOutside="clickInputOutside"
        @getInputData="getInputData"
      >
      </searchBox>
      <div class="experience-time" v-if="dateType == '30' || dateType == '40'">
        体验时间
        <div class="time" v-if="leftTime < 86400">
          <div class="time-box">{{ timeHour }} 时</div>
          <div class="dot">
            <div></div>
            <div></div>
          </div>
          <div class="time-box">{{ timeMin }} 分</div>
          <div class="dot">
            <div></div>
            <div></div>
          </div>
          <div class="time-box">{{ timeSec }} 秒</div>
        </div>
        <div v-else class="time">剩余{{ leftDays }}天</div>
      </div>
      <div class="main">
        <div class="topNavi">
          <div class="topNaviItem">
            <div class="backBtn" @click="handleBackBtnClick">
              <img :src="backBtn" alt="" />
            </div>
            <div class="naviPositionName">{{ positionName }}</div>
            <div class="fatherTitleName">{{ positionFatherName }}</div>
            <div
              class="collect"
              :class="collectStatus ? 'collected' : ''"
              @click="clickCollect"
            >
              <img src="../../assets/home/whiteCollect.png" />
              <p>{{ collectStatus ? "已关注" : "关注" }}</p>
            </div>
            <div
              class="superiorPositionName"
              v-if="superiorPositionName"
              @click="handleSuperiorPositionNameClick"
            >
              <div class="titleTips">上级职业：</div>
              <div class="superiorPositionNameContent">
                {{ superiorPositionName }}
              </div>
            </div>
            <div
              class="career-rel"
              v-if="JSON.stringify(careerRelObj) !== '{}'"
            >
              <div class="rel-hover" :style="{ 'min-width': '100px' }">
                国家职业大典分类关联
              </div>
              <img
                class="rel-hover"
                style="width: 20px; height: 20px"
                :src="bgQuestion"
                alt=""
              />
              <div
                class="rel-name-all"
                v-if="
                  careerRelObj.firstName &&
                  careerRelObj.secondName &&
                  careerRelObj.thirdName &&
                  careerRelObj.fourthName
                "
              >
                {{ careerRelObj.firstName }} / {{ careerRelObj.secondName }} /
                {{ careerRelObj.thirdName }} /
                {{ careerRelObj.fourthName }}
              </div>
            </div>
          </div>
          <div class="topNaviItemRight" v-if="!isSuperToken && false">
            <button
              :class="['switchBtn', 'downloadBtn', isProducing ? 'active' : '']"
              @click="handleDownload"
              v-if="isAdmin == true"
              :loading="isProducing"
            >
              <span v-if="isProducing"
                >报告生成中<span class="dot-ani"></span>
              </span>
              <span v-else>一键下载报告</span>
            </button>
            <!-- <button
              class="switchBtn downloadBtn"
              @click="handleMine"
              v-if="isAdmin == true"
            >
              批量下载报告
            </button> -->
            <button
              class="switchBtn"
              @click="changeEditStatus()"
              v-if="isAdmin == true && currentTab == '1-1'"
            >
              {{ editAll ? "退出编辑全部" : "编辑全部" }}
            </button>
            <button
              class="switchBtn disabledSave"
              v-if="
                isAdmin == true &&
                currentTab == '61' &&
                editAll == false &&
                openAtLeastOneEdit == true
              "
              @click="saveAll()"
            >
              保存全部
            </button>
            <button
              class="saveAllBtn"
              style="width: 80px"
              @click="saveAll()"
              v-if="isAdmin == true && editAll == true && currentTab == '61'"
            >
              保存全部
            </button>
          </div>
        </div>
        <div class="mainContent">
          <div class="menu">
            <el-menu
              :default-active="defaultActive"
              :default-openeds="openeds"
              @select="handleSelect"
              @open="handleOpen"
              @close="handleClose"
              :collapse="false"
            >
              <el-submenu
                v-for="item in allLayerList"
                :index="item.layerId"
                :key="item.layerId"
              >
                <template slot="title">
                  <span>
                    <img
                      class="menuIcon"
                      :src="
                        currentFatherTab == item.layerId
                          ? menuIconActiveParams[currentFatherTab]
                          : menuIconNormalParams[item.layerId]
                      "
                    />
                    {{ item.title }}
                  </span>
                </template>
                <el-menu-item
                  v-for="childrenItem in item.children"
                  :index="childrenItem.layerId"
                  :key="childrenItem.layerId"
                  >{{ childrenItem.title }}</el-menu-item
                >
              </el-submenu>
            </el-menu>
          </div>
          <div id="content">
            <careerOverview
              v-if="currentTab == '1'"
              ref="careerOverview"
              :allLayerList="allLayerList"
            />
            <salaryOverview
              v-else-if="currentTab == '41'"
              :allLayerList="allLayerList"
            />
            <RecruitmentOverview
              v-else-if="currentTab == '74'"
              :allLayerList="allLayerList"
            />
            <careerProspects
              v-else-if="currentTab == '34'"
              :allLayerList="allLayerList"
            />
            <careerGrowth
              v-else-if="currentTab == '154'"
              :allLayerList="allLayerList"
            />
            <workChance
              v-else-if="currentTab == '195'"
              :allLayerList="allLayerList"
            />
            <developmentPath
              v-else-if="currentTab == '201'"
              :allLayerList="allLayerList"
            />
            <generalLayerComponet
              v-else
              :allLayerList="allLayerList"
              :currentTab="currentTab"
            />
            <div
              class="scrollToTop"
              v-if="scrollToTopBtn"
              @click="scrollTopTopClick()"
            >
              <div class="top-icon"></div>
              <div class="small">TOP</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="glass"
      v-if="showGlass && (dateType == '30' || dateType == '40')"
    >
      <div class="wx-card">
        <div class="title">
          <img :src="ztLogo" alt="" />
          <span>一览就业创业职业大全云平台</span>
        </div>
        <div class="desc">你的体验时间已到,如需续用,请联系工作人员</div>
        <div class="wx">
          <img :src="wxImg" alt="" v-if="wxImg" />
        </div>
        <div class="name">{{ contactName }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import JSZip from "jszip";
import FileSaver from "file-saver";
import {
  batchSaveAnswer,
  getProfessionTreeByTitle,
  addPositionCollect,
  delPositionCollect,
  judgeCollectStatus,
  homepageLayer,
  reqCareerRel,
  getDate,
  getSuperiorPosition,
} from "@/api/position-detail";
import { burryPoint } from "@/api/job-detail";
import { queryReports, createReports } from "@/api/mine";
import Websocket from "@/components/Websocket";
import careerOverview from "@/views/position/careerOverview";
import salaryOverview from "@/views/position/salaryOverview";
import RecruitmentOverview from "@/views/position/RecruitmentOverview";
import careerProspects from "@/views/position/careerProspects";
import careerGrowth from "@/views/position/careerGrowth";
import workChance from "@/views/position/workChance";
import developmentPath from "@/views/position/developmentPath";
import generalLayerComponet from "@/views/position/generalLayerComponet";
import VueCookies from "vue-cookies";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import searchBox from "../home/components/searchBox";
import mineAvatar from "../home/components/mineAvatar";
import governmentIcon from "@/assets/home/governmentIcon.png";

export default {
  name: "Detail",
  components: {
    Websocket,
    Editor,
    Toolbar,
    searchBox,
    careerOverview,
    salaryOverview,
    RecruitmentOverview,
    careerProspects,
    careerGrowth,
    workChance,
    generalLayerComponet,
    mineAvatar,
    developmentPath,
  },
  data() {
    return {
      governmentIcon,
      contactName: "",
      dateType: "10",
      leftDays: 0,
      timeHour: "0",
      timeMin: "0",
      timeSec: "0",
      leftTime: 0,
      ztLogo: require("../../assets/home/zt-logo.png"),
      wxImg: "",
      showGlass: false,
      SecretKey: "",
      careerOverviewWrapperDom: "",
      pageTitle: "",
      clickInputOutside: false,
      collectStatus: null,
      inputData: "",
      specialHidden: true,
      positionFatherName: "",
      token: "",
      bgQuestion: require("../../assets/detail/menuIcon/bg-question@3x.png"),
      menuIconList: [
        require("../../assets/detail/menuIcon/train@2x.png"),
        require("../../assets/detail/menuIcon/trainSelected@2x.png"),
        require("../../assets/detail/menuIcon/sal@2x.png"),
        require("../../assets/detail/menuIcon/salSelected@2x.png"),
        require("../../assets/detail/menuIcon/recruit@2x.png"),
        require("../../assets/detail/menuIcon/recruitSelected@2x.png"),
        require("../../assets/detail/menuIcon/position@2x.png"),
        require("../../assets/detail/menuIcon/positionSelected@2x.png"),
      ],
      menuIconActiveParams: {
        1: require("../../assets/detail/menuIcon/trainSelected@2x.png"),
        41: require("../../assets/detail/menuIcon/salSelected@2x.png"),
        74: require("../../assets/detail/menuIcon/recruitSelected@2x.png"),
        34: require("../../assets/detail/menuIcon/positionSelected@2x.png"),
        154: require("../../assets/detail/menuIcon/careerGrowthSelected.png"),
        195: require("../../assets/detail/menuIcon/workChanceSelected.png"),
        201: require("../../assets/detail/menuIcon/ic_memberSelected@2x.png"),
      },
      menuIconNormalParams: {
        1: require("../../assets/detail/menuIcon/train@2x.png"),
        41: require("../../assets/detail/menuIcon/sal@2x.png"),
        74: require("../../assets/detail/menuIcon/recruit@2x.png"),
        34: require("../../assets/detail/menuIcon/position@2x.png"),
        154: require("../../assets/detail/menuIcon/careerGrowth.png"),
        195: require("../../assets/detail/menuIcon/workChance.png"),
        201: require("../../assets/detail/menuIcon/ic_member@2x.png"),
      },
      editData: {
        editNum: "0",
        editPerson: "",
        editTime: "",
        contributePersonList: [],
      },
      selectedNav: "",
      infoName: {
        def: { name: "岗位定义", order: 0 },
        task: { name: "工作内容", order: 1 },
        skill: { name: "推荐技能", order: 2 },
        book: { name: "推荐书籍", order: 3 },
        tool: { name: "推荐工具", order: 4 },
      },
      backBtn: require("../../icons/backBtn.png"),
      info: [],
      // selfInfo: [],
      currentPositionName: "",
      positionName: "",
      positionId: 0,
      currentButton: null,
      chatKey: "",
      loading: false,
      isContinue: false,
      aiCreateStatus: false,
      isStoped: false,
      // rebotBg: true,
      messageList: [],
      messages: [],
      // showError: false,
      // historyChatKey: "",
      // isShowMore: false,
      // currentMsg: "",
      currentRole: "",
      // userId: "",
      // userName: "",
      currentTab: "61",
      currentFatherTab: "1",
      openeds: [],
      isAdmin: true,
      // editor: null,
      // toolbarConfig: {},
      // editorConfig: {
      //   placeholder: "请输入内容...",
      //   scroll: true,
      // },
      // mode: "simple", // or 'simple'
      isClickScroll: false,
      editAll: false,
      scrollToTopBtn: false,
      openAtLeastOneEdit: false,
      isSuperToken: false,
      isProducing: false,
      preDownloadUrlList: [],
      downloadUrlList: [],
      allLayerList: [],
      showItemParams: {
        showIntro: false, //职业简介
        showEnvironment: false, //工作环境
        showWorth: false, //职业价值
        showCrowd: false, //适用人群
        showTotalSarlary: false, //整体水平
        showDetailSalary: false, //薪酬分析
      },
      defaultActive: "61",
      customerDesc: "",
      customerLogo: "",
      careerRelObj: {},
      interval: null,
      superiorPositionId: "",
      superiorPositionName: "",
    };
  },
  mounted() {
    this.SecretKey = this.$route.query.SecretKey;
    this.isSuperToken =
      localStorage.getItem("superToken") ==
        "407404EAEC845F1B91A104B80FE86D89" ||
      localStorage.getItem("superToken") == "5FD271D8A0AA315DD218801C0C3A0DEA";
    document.title = this.pageTitle + "-" + this.positionName;
    if (
      this.$route.query.superToken == "407404EAEC845F1B91A104B80FE86D89" ||
      this.$route.query.superToken == "5FD271D8A0AA315DD218801C0C3A0DEA"
    ) {
      this.specialHidden = false;
    }

    //不知道监听什么历史代码
    window.addEventListener("click", this.listenerChangeFlag);
    //监听页面滚动，动态显示置顶按钮
    setTimeout(() => {
      this.careerOverviewWrapperDom = document.querySelector(
        ".careerOverviewWrapper"
      );
      this.careerOverviewWrapperDom.addEventListener(
        "scroll",
        this.handleScroll
      );
    }, 2000);
    //埋点
    this.$bus.$emit("generalReportAction", {
      etId: 40044,
      personId: localStorage.getItem("personId"),
      cardType: localStorage.getItem("cardType"),
      jumpSource: 60,
      sourceType: 60,
      eventData: this.positionName,
    });
  },
  beforeDestroy() {
    window.removeEventListener("click", this.listenerChangeFlag);
    this.careerOverviewWrapperDom.removeEventListener(
      "scroll",
      this.handleScroll
    );
  },
  created() {
    this.positionId = this.$route.query.id;
    this.positionName = this.$route.query.name;
    this.getFatherName(this.positionName);
    this.getAllLayers();
    if (localStorage.getItem("userInfo")) {
      this.token = JSON.parse(localStorage.getItem("userInfo")).token;
    }
    if (localStorage.getItem("customerDesc")) {
      this.customerDesc = localStorage.getItem("customerDesc");
      document.title = this.customerDesc;
    }
    const extraJson = localStorage.getItem("extra");
    if (extraJson) {
      const extra = JSON.parse(extraJson);
      this.customerLogo = extra.icon ? extra.icon : this.governmentIcon;
    } else {
      this.customerLogo = this.governmentIcon;
    }

    const superToken = localStorage.getItem("superToken");
    if (superToken) {
      this.pageTitle = localStorage.getItem("customerDesc");
    } else {
      this.pageTitle = "职神籍";
    }
    this.burryPointFn();
    this.judgeCollect();
  },
  mounted() {
    console.log("this.$route.query.token", this.$route.query.token);
    // 用于放到cvm中展示我们页面携带的会过期的token
    if (this.$route.query.token) {
      localStorage.setItem("token", "Bearer " + this.$route.query.token);
    }
    //如果url存在这个字段就显示一些图表每个点的值
    if (this.$route.query.isLabelShow) {
      this.$store.dispatch("chart/changeSetting", {
        key: "isLabelShow",
        value: true,
      });
      //console.log("展示图表值咯");
    }

    if (localStorage.getItem("customerDesc")) {
      this.customerDesc = localStorage.getItem("customerDesc");
      document.title = this.customerDesc;
    }
    this.reqCareerRelFn();
    this.getDateFn();
    this.getSuperiorPositionFn();
  },
  watch: {
    info: {
      handler(newValue) {
        var noneEdit = newValue.some(function (item) {
          return item.currentEdit;
        });
        if (!noneEdit) {
          this.editAll = false;
          this.openAtLeastOneEdit = false;
        } else {
          this.openAtLeastOneEdit = true;
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    async burryPointFn() {
      const params = {
        personId: localStorage.getItem("personId"),
        platform: 2,
        event_type: 7,
        ylPositionId: this.positionId,
        burryPage: this.customerDesc,
        description: this.positionName,
      };
      await burryPoint(params);
    },
    async getDateFn() {
      const params = {};
      const roleType = localStorage.getItem("roleType") || "10";
      if (roleType == "10") {
        //  学生
        params.roleType = roleType;
        params.personId = localStorage.getItem("personId") || "";
      } else {
        //老师
        params.saasId =
          JSON.parse(localStorage.getItem("userInfo")).admin_id ||
          "100000000000001";
      }
      const res = await getDate(params);
      if (res.code == 200) {
        //console.log("res", res.data.type);
        this.dateType = res.data.resType;
        this.contactName = res.data.contactName || "";
        this.wxImg = res.data.contactQrCode;
        const backendTimeString = res.data.endTime;
        // 将时间字符串转换为Date对象
        const backendTime = new Date(backendTimeString);
        // 获取当前时间的Date对象
        const currentTime = new Date();
        // 计算两个时间之间的毫秒差异
        const differenceInMillis =
          backendTime.getTime() - currentTime.getTime();
        // 将毫秒转换为秒
        const differenceInSeconds = (differenceInMillis / 1000).toFixed(0);
        this.leftDays = (differenceInSeconds / 86400).toFixed(0);
        this.startCountdown(differenceInSeconds);
      }
    },
    startCountdown(seconds) {
      this.leftTime = seconds; // 设置剩余时间
      const updateTimer = () => {
        this.timeHour = Math.floor(this.leftTime / 3600)
          .toString()
          .padStart(2, "0");
        this.timeMin = Math.floor((this.leftTime % 3600) / 60)
          .toString()
          .padStart(2, "0");
        this.timeSec = (this.leftTime % 60).toString().padStart(2, "0");

        if (this.leftTime <= 0) {
          clearInterval(this.interval); // 使用 this.interval 来引用定时器
          this.interval = null; // 清除定时器引用
          if (this.dateType == "30" || this.dateType == "40") {
            this.showGlass = true; // 时间到了就展示蒙层
          }
          this.timeHour = "00";
          this.timeMin = "00";
          this.timeSec = "00";
        } else {
          this.leftTime--; // 减少剩余秒数
        }
      };

      this.interval = setInterval(updateTimer, 1000); // 将 interval 保存在组件的数据属性中
    },
    async reqCareerRelFn() {
      const params = {
        positionId: this.positionId,
        // positionId: "117708",
      };
      const res = await reqCareerRel(params);
      if (res.code == 200) {
        //console.log("res", res);
        this.careerRelObj = res.data;
        if (res.data.careerName) {
          this.careerRelObj.fourthName = res.data.careerName;
        }
        if (res.data.list) {
          this.careerRelObj.thirdName = res.data.list[0].careerName;
          if (res.data.list[0].list) {
            this.careerRelObj.secondName = res.data.list[0].list[0].careerName;
            if (res.data.list[0].list[0].list) {
              this.careerRelObj.firstName =
                res.data.list[0].list[0].list[0].careerName;
            }
          }
        }
      }
    },
    async handleDownload() {
      if (this.isProducing) return;
      this.isProducing = true;
      this.createReportsFn();
      const params = [
        {
          ylPositionId: this.positionId,
          reportTypeList: [
            "training_development_report",
            // "recruitment_allocation_report",
            // "compensation_incentive_report",
          ],
        },
      ];
      setTimeout(async () => {
        const res = await queryReports(params);
        this.isProducing = false;
        if (res.code == 200) {
          const temp = [];
          res.data.forEach((item) => {
            temp.push(item.reportUrl);
          });
          // this.preDownloadUrlList = temp;
          this.preDownloadUrlList = [
            "http://oatestv2.crm1001.com/api-file/file/getUrlById?id=1700075525315235842",
            "http://oatestv2.crm1001.com/api-file/file/getUrlById?id=1700075711592665090",
          ];
          this.batchGetDownloadUrl();
        }
      }, 3500);
    },
    async createReportsFn() {
      const params = {
        reportTypeList: [
          "training_development_report",
          // "recruitment_allocation_report",
          // "compensation_incentive_report",
        ],
        ylPositionIdList: [this.positionId],
      };
      await createReports(params);
    },
    // 把路径指向文件转成ArrayBuffer对象
    getFile(url) {
      return new Promise((resolve, reject) => {
        axios({
          method: "get",
          url,
          headers: { Authorization: this.token },
          responseType: "arraybuffer",
        })
          .then((data) => {
            resolve(data.data);
          })
          .catch((error) => {
            reject(error.toString());
          });
      });
    },
    //批量下载方法
    batchDownload(urlList) {
      const cache = {};
      const promises = [];
      const zip = new JSZip();
      urlList.forEach((item) => {
        const promise = this.getFile(item).then((data) => {
          const arr_name = item.split("/");
          const file_name = arr_name[arr_name.length - 1]; // 获取文件名
          zip.file(file_name, data, { binary: true }); // 逐个添加文件
          cache[file_name] = data;
        });
        promises.push(promise);
      });
      Promise.all(promises).then(() => {
        zip.generateAsync({ type: "blob" }).then((content) => {
          // 生成二进制流
          FileSaver.saveAs(content, `${this.positionName}.zip`); // 利用file-saver保存文件
        });
      });
    },
    // 批量获取下载url
    batchGetDownloadUrl() {
      const promises = [];
      this.preDownloadUrlList.forEach((url) => {
        const promise = this.singleDownload(url);
        promises.push(promise);
      });
      Promise.all(promises).then((res) => {
        console.log(res, "-----------");
        this.batchDownload(res);
      });
    },
    singleDownload(url) {
      return new Promise((resolve, reject) => {
        axios({
          method: "get",
          url,
          headers: { Authorization: this.token },
        })
          .then((res) => {
            resolve(res.data.data);
          })
          .catch((err) => {
            reject(err.toString());
          });
      });
    },
    download(url) {
      axios({
        url,
        method: "get",
        headers: { Authorization: this.token },
      }).then((res) => {
        if (res.data.code == 200) {
          const link = document.createElement("a");
          link.style.display = "none";
          link.href = res.data.data;
          link.download = "我是一个文件名字";
          document.body.appendChild(link);
          link.click();
          setTimeout(() => {
            link.remove();
          }, 1000);
        }
      });
    },
    handleMine() {
      this.$router.push({
        path: "/mine",
        query: {
          id: this.$route.query.id,
          superToken: this.$route.query.superToken || "",
          SecretKey: this.$route.query.SecretKey || "",
          customerName: this.$route.query.customerName,
        },
      });
    },
    getAllLayers() {
      const params = {
        id: this.positionId,
      };
      homepageLayer(params)
        .then((res) => {
          if (res.code == 200) {
            this.allLayerList = res.data;
            // 只有这个94cbe78f3bcec8be2a4b0ac87a31ba7c和94cbe78f3bcec8beca9c9c1d7f1bb7b6才展示职业发展路径
            // let SecretKey = localStorage.getItem("SecretKey");
            // if (
            //   SecretKey == "94cbe78f3bcec8be2a4b0ac87a31ba7c" ||
            //   SecretKey == "94cbe78f3bcec8beca9c9c1d7f1bb7b6"
            // ) {
            //   console.log("aaaa");
            // } else {
            //   // if (
            //   //   SecretKey != "94cbe78f3bcec8be2a4b0ac87a31ba7c" ||
            //   //   SecretKey != "94cbe78f3bcec8beca9c9c1d7f1bb7b6"
            //   // ) {
            //   //   this.allLayerList.forEach((item, index) => {
            //   //     if (item.layerId == "201") {
            //   //       this.allLayerList.splice(index, 1);
            //   //     }
            //   //   });
            //   // }
            //   this.allLayerList.forEach((item, index) => {
            //     if (item.layerId == "201") {
            //       this.allLayerList.splice(index, 1);
            //     }
            //   });
            // }

            this.$set(this, "allLayerList", res.data);
            //根据传入的参数进行tab跳转
            // //console.log("this.$route.query.jumpTab", this.$route.query.jumpTab);

            switch (this.$route.query.jumpTab) {
              case "salary":
                this.openeds = ["2"];
                this.defaultActive = "83";
                this.currentTab = "41";
                break;
              default:
                this.openeds = ["1"];
                this.defaultActive =
                  this.allLayerList[0].children[0].layerId + "";
                this.currentTab = this.allLayerList[0].layerId + "";
                break;
            }
            console.log("allLayerList1112", this.allLayerList);

            this.showItemConfiger();
          }
        })
        .catch((err) => {
          //console.log("err", err);
          this.$message.error("服务器开小差啦");
        });
    },
    showItemConfiger() {
      this.allLayerList.forEach((item, index) => {
        item.children.forEach((subItem, subIndex) => {
          if (subItem.layerId === "61") {
            //二级维度职业简介
            this.showItemParams.showIntro = true;
          }
          if (subItem.layerId === "8") {
            //二级维度工作环境
            this.showItemParams.showEnvironment = true;
          }
          if (subItem.layerId === "21") {
            this.showItemParams.showWorth = true;
          }
          if (subItem.layerId === "67") {
            this.showItemParams.showCrowd = true;
          }
          if (subItem.layerId === "83") {
            //二级维度薪酬整体水平
            this.showItemParams.showTotalSarlary = true;
          }
          if (subItem.layerId === "42") {
            //二级维度薪酬分析
            this.showItemParams.showDetailSalary = true;
          }
        });
      });
    },
    clickCollect() {
      if (this.collectStatus) {
        delPositionCollect({
          positionId: this.positionId,
        }).then((res) => {
          if (res.code == 200) {
            //console.log("取关成功");
            this.$message({
              type: "success",
              message: "已取消关注",
            });
          }
        });
      } else {
        addPositionCollect({
          positionId: this.positionId,
        }).then((res) => {
          //console.log("addPositionCollect", res);
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "已添加关注",
            });
          } else {
            this.$message({
              type: "warning",
              message: res.status_desc || "添加关注失败",
            });
          }
        });
      }
      this.collectStatus = !this.collectStatus;
    },
    getFatherName(name) {
      getProfessionTreeByTitle({
        positionId: this.positionId,
      }).then((res) => {
        if (res.code == 200) {
          if (res.data) {
            this.positionFatherName = `${res.data.topTitle} · ${res.data.parentTitle}`;
          } else {
            this.positionFatherName = "暂无分类";
          }
        }
      });
    },
    listenerChangeFlag(e) {
      let nowClassName = e.target.className;
      if (nowClassName != "search" && nowClassName != "el-input__inner") {
        this.$refs.searchBox && this.$refs.searchBox.clickInputOutside();
      }
    },
    handleLogoClick() {
      this.$router.push({
        path: "/position",
        query: {
          superToken: this.$route.query.superToken || "",
          SecretKey: this.$route.query.SecretKey || "",
          customerName: this.$route.query.customerName || "",
        },
      });
    },
    handleBackBtnClick() {
      this.$router.push({
        path: "/position",
        query: {
          superToken: this.$route.query.superToken || "",
          SecretKey: this.$route.query.SecretKey || "",
        },
      });
    },
    getInputData(inputData) {
      this.inputData = inputData;
      this.getSearchList();
    },
    handleOpen(val) {
      console.log(this.currentTab + "");
    },
    handleClose(val) {
      console.log(val);
    },
    handleSelect(val, values) {
      const isDiffirentTab = this.currentTab != values[0];
      this.currentTab = values[0] + "";

      const selectedChildLayerId = values[1];

      this.allLayerList.forEach((item, index) => {
        if (item.layerId == this.currentTab) {
          item.children.forEach((_item, _index) => {
            if (_item.layerId == selectedChildLayerId) {
              console.log(
                "点击了左侧菜单：",
                "menuScroll" + index + "-" + _index
              );
              if (isDiffirentTab) {
                setTimeout(() => {
                  var el = document.getElementById(
                    "menuScroll" + index + "-" + _index
                  );
                  if (el) {
                    el.scrollIntoView({
                      behavior: "smooth",
                      block: "start",
                      inline: "nearest",
                    });
                    this.$bus.$emit("menuSetRightNavActive", _index);
                  }
                }, 1000);
              } else {
                var el = document.getElementById(
                  "menuScroll" + index + "-" + _index
                );

                if (el) {
                  el.scrollIntoView({
                    behavior: "smooth",
                    block: "start",
                    inline: "nearest",
                  });
                  this.$bus.$emit("menuSetRightNavActive", _index);
                }
              }
            }
          });
        }
      });
      this.aiCreateStatus = false;
      let textEl = document.querySelectorAll(".AIBtn");
      textEl.forEach((item) => {
        item.classList.remove("AILoading");
      });
      if (values[0]) {
        this.currentFatherTab = values[0];
      }

      this.scrollToTopBtn = false;
      if (this.careerOverviewWrapperDom.removeEventListener) {
        this.careerOverviewWrapperDom.removeEventListener(
          "scroll",
          this.handleScroll
        );
      }

      setTimeout(() => {
        this.careerOverviewWrapperDom = document.querySelector(
          ".careerOverviewWrapper"
        );
        this.careerOverviewWrapperDom.addEventListener(
          "scroll",
          this.handleScroll
        );
      }, 2000);
    },
    adminInit() {
      const userToken = VueCookies.get("vue_admin_template_token");
      if (userToken === "admin-token") {
        this.isAdmin = true;
      }
    },
    judgeCollect() {
      judgeCollectStatus({ id: this.positionId }).then((res) => {
        if (res.code == 200) {
          this.collectStatus = res.data;
        }
      });
    },
    //全部编辑
    changeEditStatus() {
      if (this.isAdmin) {
        if (this.editAll) {
          this.$refs.careerOverview.changeEditStatus(false);
          this.editAll = false;
        } else {
          this.$refs.careerOverview.changeEditStatus(true);
          this.editAll = true;
        }
      }
    },
    saveAll() {
      let params = [];
      this.info.forEach((item) => {
        if (item.allContent != item.content.replace(/<br>/g, "\n")) {
          params.push({
            ylPositionId: this.positionId,
            questionId: item.columnCode,
            answerContent: item.allContent,
          });
        }
      });
      if (params.length > 0) {
        this.$confirm("此操作将覆盖原有内容, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.editAll = false;
            batchSaveAnswer(params)
              .then((res) => {
                if (res.code == 200) {
                  this.info.forEach((item) => {
                    item.content = item.allContent.replace(/\n/g, "<br>");
                    item.currentEdit = false;
                  });
                  this.$message({
                    message: "保存全部成功！",
                    type: "success",
                    duration: 5 * 1000,
                  });
                }
              })
              .catch(() => {
                this.$message({
                  type: "error",
                  message: "修改失败，请重试",
                });
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消修改",
            });
          });
      } else {
        this.editAll = false;
        this.info.forEach((item) => {
          item.currentEdit = false;
        });
        this.$message({
          type: "success",
          message: "修改信息无变化!",
        });
      }
    },
    scrollTopTopClick() {
      this.careerOverviewWrapperDom.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
    handleScroll() {
      const container = document.querySelector(".careerOverviewWrapper");
      if (container) {
        var top = container.scrollTop || document.body.scrollTop;
        this.scrollToTopBtn = top > 400;
      }
    },
    getSuperiorPositionFn() {
      getSuperiorPosition({
        ylPositionId: this.positionId,
      }).then((res) => {
        if (res.code == 200) {
          if (res.data) {
            this.superiorPositionId = res.data.ylPositionId;
            this.superiorPositionName = res.data.positionName;
          }
        }
      });
    },
    handleSuperiorPositionNameClick() {
      //在当前页面切换职业
      let routeData = this.$router.resolve({
        path: "/position-detail",
        query: {
          // fatherTitle: `${item.topTitle} · ${item.parentTitle}`,
          id: this.superiorPositionId,
          name: this.superiorPositionName,
          superToken: this.$route.query.superToken || "",
          SecretKey: this.$route.query.SecretKey || "",
          customerName: this.$route.query.customerName,
          // collect: true,
        },
      });
      window.open(routeData.href, "_blank");
    },
  },
};
</script>
<style scoped lang="scss">
@keyframes popupAnimation {
  0% {
    transform: translate(-50%, 100%);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}
.all {
  position: relative;
  background: #f7f8fa;
  height: 100%;
  min-width: 1190px;
  .glass {
    width: 100%;
    height: 100%;
    background: rgba(22, 22, 22, 0.6);
    backdrop-filter: blur(3px);
    position: absolute;
    top: 0;
    z-index: 9999;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-top: 20%;
    .wx-card {
      width: 361px;
      height: 316px;
      background-image: url("../../assets/home/wx-bg.png");
      background-size: 100% 100%;
      padding: 23px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        img {
          width: 28px;
          height: 28px;
        }
        span {
          font-weight: 800;
          font-size: 16px;
          color: #141416;
        }
      }
      .desc {
        margin-bottom: 19px;
      }
      .wx {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        background-color: #ffffff;
        padding: 3px 3px 4px 4px;
        border-radius: 4px;
        img {
          width: 148px;
          height: 148px;
        }
      }
      .name {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 15px;
        color: #333333;
      }
    }
  }
}
#top {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 57px;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(7px);
  background-size: 100% 57px;
  z-index: 2;
  .title-container {
    display: flex;
    align-items: center;
    padding-left: 25px;
    color: #fff;
    font-size: 17px;
    line-height: 24px;
    letter-spacing: 2px;
    .title {
      font-family: "title-home-font";
      cursor: pointer;
      max-width: 26vw;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-inline-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }
    img {
      height: 24px;
      width: auto;
      cursor: pointer;
      margin-right: 5px;
    }
  }
  .mine {
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 14px;
    .avator {
      height: 24px;
      width: 24px;
      margin: 0 24px 0 8px;
      border-radius: 50%;
      overflow: hidden;
    }
  }
}
.main {
  height: 100%;
  position: relative;
  border-radius: 20px;
  margin-top: 14px;
  background-color: white;
  width: calc(100vw - 34px);
  min-width: 1375px;
  display: flex;
  flex-direction: column;
  .topNavi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 16px;
    .topNaviItem {
      display: flex;
      align-items: center;
    }
    .topNaviItemRight {
      display: flex;
      align-items: center;
      padding-right: 65px;
    }
    .backBtn {
      width: 36px;
      height: 36px;
      margin-right: 16px;
      img {
        width: 36px;
        height: 36px;
      }
    }
    .naviPositionName {
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #222222;
      line-height: 28px;
    }
    .fatherTitleName {
      margin-left: 10px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 20px;
    }

    .collect {
      cursor: pointer;
      padding: 4px 10px;
      border-radius: 110px;
      background: rgba(244, 93, 93, 1);
      display: flex;
      color: #fff;
      align-items: center;
      font-size: 14px;
      margin-left: 16px;
      img {
        width: 14px;
        height: 14px;
      }
      p {
        margin: 0;
        margin-left: 5px;
        margin-top: 2px;
      }
    }
    .collected {
      background: rgba(204, 204, 204, 1);
    }
    .superiorPositionName {
      display: flex;
      margin-left: 40px;
      align-items: center;

      .titleTips {
        font-size: 12px;
        color: #222;
        margin-left: 5px;
        font-weight: 600;
      }
      .superiorPositionNameContent {
        font-size: 14px;
        font-weight: 600;
        color: #ffffff;
        background: #4880ff;
        border-radius: 16px;
        padding: 0px 16px;
        line-height: 32px;
        cursor: pointer;
      }
    }
    .career-rel {
      // width: 500px;
      margin-left: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      font-weight: 400;
      font-size: 14px;
      color: #999999;
      cursor: pointer;
      position: relative;

      .rel-name {
        margin: 0 6px;
        max-width: 180px;
        overflow: hidden; /* 隐藏超出部分 */
        white-space: nowrap; /* 防止文本换行 */
        text-overflow: ellipsis; /* 超出部分显示省略号 */
        transition: max-width 0.3s ease; /* 平滑过渡效果 */
      }
      .rel-name-all {
        opacity: 0;
        transition: opacity 0.3s;
        position: absolute;
        top: -35px;
        white-space: nowrap;
        color: #ffffff;
        background-color: #222222;
        // height: 20px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        padding: 6px;
      }
    }
    .career-rel:hover .rel-name-all {
      visibility: visible;
      opacity: 1;
    }
  }
  .mainContent {
    display: flex;
    flex: 1;
    width: 100%;
    min-width: 1375px;
  }
}
#app-container {
  width: 100%;
  display: flex;
  background: url("../../assets/home/back.png") no-repeat;
  flex-direction: column;
  background-size: 100.1% auto;
  align-items: center;
  min-width: 1375px;
  ::v-deep .positionSearchContainer,
  .search-box {
    height: auto !important;
  }
  .experience-time {
    // width: 253px;
    height: 28px;
    z-index: 3;
    position: absolute;
    top: 16px;
    right: 110px;
    // background-color: red;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #ffffff;
    .time {
      margin-left: 9px;
      display: flex;
      flex-direction: row;
      align-items: center;
      .time-box {
        width: 56px;
        height: 28px;
        padding: 4px 8px; /* 内边距 */
        border: 1px solid #5e6d84; /* 边框 */
        border-radius: 4px; /* 圆角 */
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 阴影 */
        margin: 0 4px;
        font-family: D-DIN-PRO-500-Medium;
        font-weight: bold;
        font-size: 15px;
        color: #ffffff;
      }
      .dot {
        height: 18px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        div {
          width: 4px;
          height: 4px;
          background: #ffffff;
          border-radius: 50%;
        }
      }
    }
  }
  .right-110 {
    right: 110px;
  }

  .right-24 {
    right: 24px;
  }
}

::v-deep .el-menu {
  width: 175px;
  border-right: 0px;
  background: #f5f5f5;
}
::v-deep .el-menu-item {
  padding-left: 60px !important;
  padding: 0;
  min-width: 145px;
  height: 41px;
  line-height: 41px;
  color: #999999;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
}
::v-deep .el-submenu__title {
  height: 41px;
  font-size: 16px;
  line-height: 41px;
  padding-left: 16px !important;
  color: #999999;
  background: #fff;
  // overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
::v-deep .el-menu-item.is-active {
  color: #0b6eff;
}
::v-deep .el-submenu.is-active > .el-submenu__title {
  color: #fff;
  padding-left: 9px !important;
  margin-left: 12px;
  background: #0b6eff;
  border-radius: 8px;
  &::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 41px;
    background: #0b6eff;
    position: absolute;
    left: -12px;
    border-radius: 8px;
  }
  .el-icon-arrow-down:before {
    color: #fff;
  }
}
.listInner {
  height: 100%;
  width: 100%;
}
.menu {
  width: 175px;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  max-height: calc(100vh - 146px);
  // border-right: 1px solid #e8e8e8;
}

#list {
  font-size: 15px;
  padding-top: 20px;
  position: relative;
  flex: 1;
  height: 100%;
  padding-right: 160px;
}
.demo-autocomplete {
  padding-bottom: 46px;
}
.scrollToTop {
  position: fixed;
  width: 48px;
  height: 48px;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  bottom: 40px;
  right: 210px;
  z-index: 99;
  background: #fff;
  font-size: 10px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: bold;
  color: #747680;
  line-height: 14px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  animation: popupAnimation 0.5s forwards;
  cursor: pointer;
  .top-icon {
    width: 16px;
    height: 16px;
    background-image: url("../../assets/detail/icon_top_gray.png");
  }
  .small {
    transform: scale(0.9);
    font-weight: 900;
  }
}
.scrollToTop:hover {
  background-color: #076afe;
  color: #fff;
  .top-icon {
    width: 16px;
    height: 16px;
    background-image: url("../../assets/detail/icon_top_white.png");
  }
}
.positionName {
  display: flex;
  width: 100%;
  align-items: center;
  color: #333333;
  // background-color: #edf6ff;
  height: 1px;
  font-size: 18px;
  font-weight: bold;
  margin-left: -20px;
  z-index: 99;
}
.switchBtn {
  float: right;
  right: 90px;
  top: 20px;
  // width: 80px;
  height: 26px;
  border-radius: 4px;
  border: 1px solid #dbe0e7;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #888888;
  line-height: 20px;
  background: #fff;
}
.downloadBtn {
  margin-right: 15px;
}
.active {
  background: #076afe;
  color: #fff;
  border-color: #076afe;
}
.dot-ani {
  display: inline-block;
  height: 12px;
  line-height: 12px;
  overflow: hidden;
}
.dot-ani::after {
  display: inline-table;
  white-space: pre;
  content: "\A.\A..\A...";
  animation: spin 2s steps(4) infinite;
}
@keyframes spin {
  to {
    -webkit-transform: translateY(-48px);
    transform: translateY(-48px);
  }
}
.disabledSave {
  margin-left: 15px;
  margin-right: 20px;
  width: 80px;
}
.controlLine {
  display: flex;
  justify-content: flex-start;
  // align-items: center;
  margin-bottom: 12px;
  .tinyTitle {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
    // margin-right: 24px;
  }
  .line {
    flex: 1;
    height: 16px;
    margin-left: 14px;
    border-bottom: 1px solid #efefef;
  }
  .saveBtns {
    display: flex;
    height: 32px;
    align-items: center;
    justify-content: center;
    padding-right: 10px;
    .contentItemEditAndAIBtn {
      line-height: 32px;
      margin: 0 10px 0 15px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #888888;
      display: flex;
      align-items: center;
      cursor: pointer;
      img {
        width: 22px;
        height: 22px;
      }
    }
  }
  .AILoading {
    position: relative;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 0px;
      height: 100%;
      background-color: transparent;
      animation-name: ellipsis;
      animation-duration: 1.5s;
      animation-iteration-count: infinite;
    }
  }
}
@keyframes ellipsis {
  from {
    width: 20px; /* 省略号宽度为0，不可见 */
    background-color: #fff; /* 省略号颜色透明 */
  }
  to {
    width: 0px; /* 省略号宽度为30px，可见 */
    background-color: #fff; /* 省略号颜色为黑色 */
  }
}
.saveAllBtn {
  width: 57px;
  height: 26px;
  border: none;
  background: #4880ff;
  color: #ffffff;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  border-radius: 4px;
  margin-left: 15px;
  margin-right: 20px;
}
.aiContent {
  flex: 1;
  height: 100%;
  font-size: 15px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #555555;
  line-height: 27px;
  // max-width: 90%;
  word-break: break-all;
  white-space: normal;
  padding-right: 36px;
}
// .aiExtendContent {
//   line-height: 28px;
//   color: #1677db;
//   margin-top: 28px;
//   word-break: break-all;
//   white-space: normal;
//   width: 50%;
// }
.editBox {
  width: 100%;
  display: flex;
  padding-right: 20px;
  .editBoxLeft {
    flex: 1;
    position: relative;
    border: 1px solid #709cff;
    .deleteContent {
      position: absolute;
      cursor: pointer;
      right: 12px;
      top: 15px;
    }
  }
  .editBoxRight {
    flex: 1;
    padding: 12px 16px 0px 16px;
    background: #f5f9ff;
    font-size: 15px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4b6aaf;
    line-height: 27px;
    position: relative;
    padding-bottom: 35px;
    .extendsItem {
      position: relative;

      .replaceByOne {
        display: flex;
        justify-content: flex-end;
        position: relative;
        bottom: 13px;
        right: 14px;
        cursor: pointer;
        color: #4880ff;
      }
    }
  }
  .noEdit {
    padding: 0;
    background: transparent;
  }
}
::v-deep .el-tabs__content {
  border-left: 1px solid #e8e8e8;
  padding-left: 36px;
}
::v-deep.el-tabs--left .el-tabs__header.is-left {
  margin-right: 0;
}
::v-deep.el-tabs--left .el-tabs__item.is-left {
  text-align: left;
}
::v-deep .el-submenu__title > span {
  padding-left: 20px;
}
::v-deep .el-tabs__item {
  height: 48px;
}
.search-box {
  margin-top: 8px !important;
  width: auto !important;
}

::v-deep .el-textarea__inner {
  padding: 12px 40px 17px 12px;
  font-size: 15px;
  line-height: 27px;
  // min-height:200px !important;
}
textarea {
  resize: none;
}
.titleFlag {
  width: 5px;
  height: 15px;
  border-radius: 32px;
  background-color: #409eff;
  margin-right: 12px;
  color: red;
}
.scroller {
  width: 152px;
  height: calc(100vh - 150px);
  right: 30px;
  top: 143px;
  color: #bfbfbf;
  font-size: 14px;
  line-height: 20px;
  position: fixed;
  border-left: 1px solid #eaedf7;
  .wrap {
    padding-top: 18px;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
  }
  .rightNavi {
    position: relative;
    display: flex;
    // height: calc(100vh - 470px);
    // flex: 1;
    overflow-y: auto;
    .navDot {
      width: 0;
      height: 0;
      margin-top: 10px;
      border-left: 8px solid #0b6eff;
      border-bottom: 8px solid transparent;
      border-top: 8px solid transparent;
      transition: margin-top 0.1s ease-in-out;
    }
    .selectedNav {
      color: #0b6eff;
    }
    .editedNav {
      color: #44d184;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        left: -15px;
        top: 7px;
        width: 4px;
        height: 5px;
        background: #44d184;
        border-radius: 50%;
      }
    }
  }
  .editStatistics {
    flex-shrink: 0;
    // position: absolute;
    // bottom: 0;
    width: 100%;
    // height: 298px;
    margin: 8px 0px 0px 0;
    background-image: linear-gradient(160deg, #e0ebfd 0%, #fff 20%, #fff 100%);
    border: #f5f5f5 1px solid;
    .grey {
      color: #a2a5b3;
      font-size: 13px;
      display: flex;
      align-items: center;
    }
    .editContentText {
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #555555;
      line-height: 22px;
    }
    .huizhang {
      width: 16px;
      height: 16px;
      margin-left: 3px;
    }
    .historyTitle {
      width: 97px;
      height: 20px;
      font-size: 14px;
      font-family: PingFang-SC-Heavy, PingFang-SC;
      font-weight: 800;
      color: #076afe;
      line-height: 20px;
      margin-left: 18px;
      margin-top: 12px;
    }
    .aditContent {
      margin: 6px 0 10px 18px;
    }
  }
}
.scrollerFlex {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin: 8px 12px;
  border: 10px;
  .title {
    display: flex;
    align-items: center;
    color: #bfbfbf;
  }
  .online {
    color: #555555;
  }
  .menuEditState {
    width: 20px;
    height: 20px;
  }
}

#content {
  color: #222222;
  font-size: 13px;
  font-family: PingFangSC-Regular;
  display: block;
  flex: 1;
  overflow-y: auto;
  min-height: calc(100vh - 150px);
  min-width: 1200px;
  overflow-x: scroll;
  // border-left: 1px solid #eaedf7;
  &::-webkit-scrollbar {
    width: 4px;
    background-color: #fff;
    border-radius: 4px;

    height: 4px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #d8d8d8;
    border-radius: 4px;
  }
}
.menuIcon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  margin-bottom: 3px;
  line-height: 16px;
}

.scrollerFlex:hover {
  color: #409eff;
  cursor: pointer;
}

::-webkit-scrollbar {
  width: 4px;
  background-color: #fff;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background-color: #d8d8d8;
  border-radius: 4px;
}
::v-deep .el-textarea__inner::-webkit-scrollbar {
  width: 5px;
  background-color: #fff;
  border-radius: 4px;
}
::v-deep .el-textarea__inner::-webkit-scrollbar-thumb {
  background-color: #d8d8d8;
  border-radius: 4px;
}
::v-deep .el-textarea {
  height: 100%;
  textarea {
    //   // height:100% !important;
    border: none;
  }
}
// ::v-deep .el-textarea {
//   max-width: 900px;
// }
::v-deep .el-table {
  max-width: 73%;
}
::v-deep .el-submenu__title > span {
  padding-left: 0;
}
button:focus {
  outline: none;
}
button:hover {
  cursor: pointer;
}
::v-deep .el-date-editor .el-range-input {
  color: #999999;
  background-color: #fafcfe;
}
::v-deep .el-range-editor--small .el-range__icon {
  display: none;
}
</style>
